<template>
	<div class="city">
		<div class="header vux-1px-b" v-show="false">
			<div class="iconfont" @click="handleBack">&#xe624;</div>
			选择城市
		</div>
		<div class="city-list" v-if="cityList" ref="list" id="city-con">
			<ul>
				<li class="city-item" v-for="(item,key,index) of cityList">
					<p class="title" :ref="menus[index]">{{key}}</p>
					<ul>
						<li class="item" v-for="(items,keys) of item" @click="handleBackGo(items,keys)">{{items}}</li>
					</ul>
				</li>
			</ul>
		</div>
		<ul class="side-bar">
			<li class="item-bar" v-for="item in cityBar" @click="handleTo">{{item}}</li>
		</ul>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	export default{
		name : "CityList",
		props:{
			cityList :{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data(){
			return{
				menus:[],
				letter:'',
				isWeChat : true
			}
		},
		methods:{
			handleBack(){			
				this.$emit('close')											
			},
			handleBackGo(item,keys){
				this.$emit('closet',{name:item,id:keys})
			},
			handleTo(e){
				this.letter = e.target.innerText
			},
			scrollRefresh(){
				this.BScroll.refresh()
			},
			isWeixin(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {
			       	this.isWeChat = false
			       	document.title = '选择城市'
			       	document.getElementById('city-con').style.top = 0
			    } else {
			        this.isWeChat = true
			    }
			}
		},
		computed:{
			cityBar(){
				this.menus = []
				for(let item in this.cityList){
					this.menus.push(item)
				}
				this.menus[0] = '热'
				return this.menus				
			},
		},
		watch:{
			letter(){
				if(this.letter){
					let ele = this.$refs[this.letter][0]
					this.BScroll.scrollToElement(ele,300)
					this.letter = ''
				}
			}
		},
		mounted(){
			this.isWeixin()
			this.BScroll = new BScroll(this.$refs.list,{
				click : true
			})
		}
	}
</script>

<style lang="less" scoped>
	@import '~vux/src/styles/1px.less';
	.city{
		position:fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 99;
		background: #fff;
		.header{
			overflow:hidden;
			position: relative;
			height: 1.44rem;
			line-height: 2rem;
			text-align: center;
			.iconfont{
				position: absolute;
				top: .54rem;
				left: 0;
				padding:0 .2rem;
				height: .9rem;
				line-height: .9rem;
			}
		}
		.city-list{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			overflow: hidden;
			.title{
				height: .6rem;
				line-height: .6rem;
				padding-left: .3rem ;
				background: #f7f7f7;
			}
			.item{
				height: .8rem;
				line-height: .8rem;
				padding-left: .3rem;
			}
		}
		.side-bar{
			z-index: 99;
			position: absolute;
			top: 0;
			bottom: 0;
			right: .24rem;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.item-bar{
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding: .07rem;
				text-align: center;
				width: .38rem;
				line-height: .35rem;
				font-size: .28rem;
				color: #288ddd;
			}
		}
	}
</style>